<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .search-input {
            margin-right: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
<h2>图书管理</h2>

<div>
    <input type="text" placeholder="图书名称" class="search-input" id="searchName">
    <button onclick="searchBooks()">查询</button>
    <button onclick="createBook()">新建</button>
</div>

<table id="bookTable">
    <thead>
    <tr>
        <th>序号</th>
        <th>图书类别</th>
        <th>图书名称</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <tr>
        <td colspan="5" style="text-align: center;">暂无数据</td>
    </tr>
    </tbody>
</table>

<script>

    function searchBooks() {
        const searchName = document.getElementById('searchName').value;
        // 这里可使用 fetch 或 axios 发起请求到后端，比如：
        // fetch(`/books?name=${searchName}`)
        //   .then(response => response.json())
        //   .then(data => renderBooks(data))
        //   .catch(error => console.error('查询失败:', error));
        console.log(`模拟查询图书，名称包含：${searchName}`);
    }


    function createBook() {
        // 可跳转到新建页面或弹出新建表单，这里简单模拟
        alert('进入新建图书流程（实际需结合路由或弹窗实现）');
        // 比如发起 POST 请求：
        // fetch('/books', {
        //   method: 'POST',
        //   headers: {
        //     'Content-Type': 'application/json'
        //   },
        //   body: JSON.stringify({/* 图书信息 */})
        // })
        // .then(response => response.json())
        // .then(data => console.log('新建成功:', data))
        // .catch(error => console.error('新建失败:', error));
    }


    function renderBooks(books) {
        const tbody = document.querySelector('#bookTable tbody');
        tbody.innerHTML = '';
        if (books && books.length > 0) {
            books.forEach((book, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                        <td>${index + 1}</td>
                        <td>${book.category}</td>
                        <td>${book.name}</td>
                        <td>${book.desc}</td>
                        <td>
                            <button onclick="editBook(${book.id})">编辑</button>
                            <button onclick="deleteBook(${book.id})">删除</button>
                        </td>
                    `;
                tbody.appendChild(tr);
            });
        } else {
            const tr = document.createElement('tr');
            tr.innerHTML = '<td colspan="5" style="text-align: center;">暂无数据</td>';
            tbody.appendChild(tr);
        }
    }


    function editBook(bookId) {
        console.log(`准备编辑图书，ID：${bookId}`);

    }


    function deleteBook(bookId) {
        if (confirm('确定删除该图书吗？')) {
            // fetch(`/books/${bookId}`, { method: 'DELETE' })
            //   .then(response => response.json())
            //   .then(data => {
            //     console.log('删除成功:', data);
            //     searchBooks(); // 删除后重新查询列表
            //   })
            //   .catch(error => console.error('删除失败:', error));
            console.log(`模拟删除图书，ID：${bookId}`);
            searchBooks();

        }
    }

</script>
</body>

</html>